﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        div {
            padding:15px
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            //获取表单元素
            var form = document.getElementById("myForm");
            var form = document.forms["name_Form"];

            //提交事件
            form.addEventListener("submit", checkForm, false);
            //脚本触发提交:但是不会触发submit事件
            //form.submit();

            //重置事件
            form.addEventListener("reset", fromReset, false);
            //脚本重置：会触发重置事件
            //form.reset();

            var myTest = form.elements["myTest"];
            //共有属性:disabled , readOnly , name ,type等 
            myTest.disabled = false;

            //共有方法focus , blur
            myTest.focus();

            //共有事件：focus , blur ,change
            myTest.addEventListener("change", function () {
                alert(" value has change");
            },false);

        }

        function checkForm(event){
            alert("监听提交事件");
            event.preventDefault();
        }

        function fromReset(event) {
            alert("监听重置事件");
            //event.preventDefault();
        }

    </script>
</head>
<body>
    <form id="myForm" action="http://www.baidu.com" name="name_Form">
        <div id="longin" style="border: 1px solid black ">
            <table>
                <tr>
                    <td><span>用户名</span></td>
                    <td><input type="text" id="name" name="name" /></td>
                </tr>

                <tr>
                    <td><span>密码</span></td>
                    <td><input type="password" name="password" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="提交" />
                        <input type="reset" value="重置" />
                    </td>
                </tr>
            </table>
        </div>

        <div>
            <input  type="text"  value="表单共有属性,方法,事件"  name="myTest"/>
        </div>



    </form>
</body>
</html>
